<template>
  <el-card class="box-card">
    <!-- 上部面包屑 -->
    <div slot="header" class="clearfix">
      <!-- 面包屑 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{this.$route.query.id ? '编辑文章':'发表文章'}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 下部form表单 -->
    <el-form ref="form" :model="article" label-width="80px">
      <el-form-item label="标题">
        <el-input v-model="article.title"></el-input>
      </el-form-item>
      <el-form-item label="内容">
        <el-input v-model="article.content"></el-input>
        <!-- <el-tiptap v-model="article.content" :extensions="extensions"></el-tiptap> -->
        <!-- <el-tiptap :extensions="extensions" v-model="article.content"></el-tiptap> -->
      </el-form-item>
      <el-form-item label="封面">
        <el-radio-group v-model="article.cover.type">
          <el-radio :label=1>单图</el-radio>
          <el-radio :label=3>三图</el-radio>
          <el-radio :label=0>无图</el-radio>
          <el-radio :label=-1>自动</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="频道">
        <el-select v-model="article.channel_id" placeholder="请选择">
          <el-option
            v-for="item in channels"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addArticle(false)">{{this.$route.query.id ? '提交修改':'发表文章'}}</el-button>
        <el-button @click="addArticle(true)">存为草稿</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { getArticlesChannel,publishArticle,GetArticleById,editArticle} from '@/api/article' //导入获取频道列表
// import 'element-tiptap/lib/index.css';
// import { 
//   ElementTiptap,
//   Doc,
//   Text,
//   Paragraph,
//   Heading,
//   Bold,
//   Underline,
//   Italic,
//   Strike,
//   ListItem,
//   BulletList,
//   OrderedList, } from 'element-tiptap';


export default {
  name: 'PublishIndex',
  data() { 
    return {
      // form: {
      //       name: '',
      //       region: '',
      //       date1: '',
      //       date2: '',
      //       delivery: false,
      //       type: [],
      //       resource: '',
      //       desc: ''
      //     },
        channels: '',//频道列表
        value:'',

        article:{
          title:'',
          content:'',
          cover: {
            type :0,
            images:[],
          },
          channel_id: null
        },//文章数据
      //   extensions: [
      //   new Doc(),
      //   new Text(),
      //   new Paragraph(),
      //   new Heading({ level: 5 }),
      //   new Bold({ bubble: true }), // 在气泡菜单中渲染菜单按钮
      //   new Underline({ bubble: true, menubar: false }), // 在气泡菜单而不在菜单栏中渲染菜单按钮
      //   new Italic(),
      //   new Strike(),
      //   new ListItem(),
      //   new BulletList(),
      //   new OrderedList(),
      // ],
    }
  },
  props: {

  },
  components:{
    // ElementTiptap,
  },
  mounted() {

  },
  created(){
    //加载频道列表
    this.loadChannel()
    //判断是否是编辑文章
    if(this.$route.query.id){
      console.log('$router的值为',this.$route.query.id);
      //根据id请求文章数据
      //根据请求的数据渲染页面
      this.loadArticleById()
    }
  },
  methods:{


    loadChannel(){
      getArticlesChannel().then(res => {
        console.log('频道结果',res);
         this.channels = res.data.data.channels
      })
    },
    //发表新建 文章
  addArticle(draft){
    //  console.log('提及');
    let article = this.article
    //判断创建还是修改
    if(this.$route.query.id){
      //修改文章
      editArticle(this.$route.query.id,this.article,draft=false).then(res=> {
        console.log('修改结果是',res);
          this.$message({
              message: '修改成功',
              type: 'success'})
      })
      this.$router.push('/article')
    }else {
      //创建文章
      publishArticle(article,draft).then(res=> {
          console.log('提交结果',res);
          this.$message({
              message: '提交成功',
              type: 'success'})
          //跳转到页面
          this.$router.push('/article')
        }).catch(err=> {
          console.log('发布失败',err);
          this.$message({
              message: '提交失败',
              type: 'error'})
        })
    }
   },

   //  编辑文章 -根据id加载文章内容
  loadArticleById(){
     GetArticleById(this.$route.query.id).then(res=> {
       console.log('文章内容请求成功',res);
       this.article = res.data.data
     })
   }
  },
 }
</script>

<style scoped>
</style>